import React, { useEffect, useState } from 'react'
import { Button, NavBar } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import http from '../../utils/http'; // 导入http模块

const Index: React.FC = () => {
  const navigate = useNavigate()
  const { id } = useParams();
  // 获取路由参数中的医生id
  const [detailData, setDetailData] = useState({});
  const backpi = () => {
    navigate(-1)
  }
  useEffect(() => {
    // 根据医生id获取详细数据，这里需要根据实际后端接口调整请求参数等细节
    http.get('/book/detail', { params: { id } }).then(res => {
      const { code, data } = res.data
      if (code === 20000) {
        setDetailData(data[0])
      }
    });
  }, []);
  const handDoctor = (item: any) => {
    navigate(`/doctor/` + item.id, { state: item })
  }
  return (
    <div style={{ background: '#fff' }}>
      <NavBar onBack={backpi} style={{ position: 'sticky', top: 0, zIndex: 999, background: '#fff', borderBottom: 'solid 1px #eee' }}></NavBar>
      <div style={{ background: '#fff', padding: '10px' }}>
        <div style={{ lineHeight: '20px' }}>
          <h3 style={{margin:'10px 0'}}>病情描述：</h3>
          <h2 style={{ fontSize: '17px', fontWeight: 'bold'}}>{detailData.texttitle}</h2>
        </div>
        <div style={{ marginTop: '20px' }}>
          <p style={{ lineHeight: '20px', fontSize: '15px', fontWeight: 'bold',marginBottom:'10px' }}>医生回答</p>
          <div style={{ display: 'flex' }}>
            <img src={detailData.doctorimage} alt="" style={{ width: '80px', height: '80px', borderRadius: '50%', marginLeft: '10px' }} />
            <div style={{ lineHeight: '20px', marginLeft: '10px' }}>
              <p>{detailData.doctorname}</p>
              <p> {detailData.doctorstate}</p>
              <p> {detailData.socolv} | {detailData.sococity}</p>
              <Button color='primary' size='small' onClick={() => handDoctor(detailData)}>马上提问</Button>
            </div>
          </div>
        </div>
      </div>
      <div style={{ padding: '10px', border: 'solid 1px #ccc', marginTop: '10px', height: '100%', borderRadius: '20px', backgroundColor: '#f4f4f4', lineHeight: '30px', margin: '10px' }}>
        <div>病情分析
          <p>{detailData.doctordescword}</p>
        </div>
        <div>意见建议
          <p>{detailData.socodescword}</p>
        </div>
      </div>
    </div>
  )
}

export default Index
